<template>
	<view class="e-flex e-p-t-26 e-p-b-40">
		<view class="e-rela" v-for="(item, index) in imgList" :key="index">
			<image
				mode="aspectFill"
				:src="item.path"
				class="e-m-r-34"
				:style="{
					width: width,
					height: height
				}"
				@tap="previewImage([item.path], 1)"
			></image>
			<image mode="aspectFill" :src="$staticPath('user/close.png')" class="close-icon img-32 e-abso" @tap="delImg(index)"></image>
		</view>
		<view
			class="upload-box e-flex-xy-center text-center"
			:style="{
				width: width,
				height: height
			}"
			v-show="imgList.length < max"
			@tap="update(max - imgList.length)"
		>
			<view>
				<view class="e-flex-x-center">
					<image :src="uploadIcon" class="img-52"></image>
				</view>
				<view class="text-center">
					<text>{{ $t(text)}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { useUpdateImg } from '@/common/hooks';

interface Props {
	max?: number;
	width?: string;
	height?: string;
	uploadIcon?: string;
	text?: string;
}
const props = withDefaults(defineProps<Props>(), {
	width: '180rpx',
	height: '180rpx',
	max: 3,
	text: 'user.上传图片'
});

const { imgList, update, previewImage, delImg } = useUpdateImg(props.max);

defineExpose({
    imgList
})
</script>

<style lang="scss" scoped>
.upload-box {
	border-radius: 10px;
	border: 2px dashed #cdcdcd;
	color: #cdcdcd;
}

.close-icon {
	top: -16rpx;
	right: 18rpx;
}
</style>
